<template>
	<view class="content">
		<view class="title">
			已绑定手机号
		</view>
		<input class="content-input" disabled v-model="phone" type="number"  placeholder="请输入您的靓号"/>
		<view class="input-row border-bottom">
			<input class="input code-input" type="number" maxlength="6" placeholder="请输入验证码" v-model="captcha"
				placeholder-style="color:#ccc;font-size:32rpx;" />
			<button class="code-btn cu-btn bg-white get-button" @tap="sendCode">{{ CodeText }}</button>
		</view>
		<view class="input-row border-bottom">
			<input class="input code-input" type="number" maxlength="6" placeholder="请输入您修改的手机号" v-model="captcha"
				placeholder-style="color:#ccc;font-size:32rpx;" />
		</view>
		<view class="btn">
			修改
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone:'',
				CodeText: '获取验证码',
				CodeNumDown: 60,
			}
		},
		onLoad(options) {
			this.phone = options.phone
		},
		methods: {
			// 发送验证码
			sendCode() {
				let ph = /^[1][0-9]{10}$/;
				if (!ph.test(this.mobile)) {
					uni.showToast({
						icon: 'none',
						title: '请输入正确的手机号'
					})
					return
				}
				this.downTime(this.CodeNumDown);
				let that = this;
				that.$http('user.smsSend', {
					mobile: this.mobile,
					event: 'mobilelogin'
				}, '获取中...').then(res => {
					this.downTime(this.CodeNumDown)
					if (res.code === 1) {
						this.downTime(this.CodeNumDown);
					} else {
						uni.showToast({
							icon: 'error',
							title: res.msg
						})
					}
				});
			},
			downTime(num) {
				if (num === 0) {
					this.CodeText = '获取验证码';
					num = 60;
					this.CodeNumDown = num;
					return;
				} else {
					num--;
					this.CodeText = num + 's后发送';
					this.CodeNumDown = num;
				}
				var _this = this;
				setTimeout(function() {
					_this.downTime(num);
				}, 1000);
			},
		}
	}
</script>

<style lang="scss" scoped>
page{
	background-color: #fff;
}
.content{
	padding: 25rpx;
	.title{
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
	}
	.content-input{
		width: 690rpx;
		height: 30rpx;
		font-weight: 400;
		font-size: 36rpx;
		color: #000;
		line-height: 90rpx;
		margin: 30rpx 0;
	}
	.input-row {
		line-height: 105upx;
		height: 105upx;
		display: flex;
		position: relative;
		align-items: center;
		border-bottom: 2upx solid #EEEEEE;
		transition: all 0.5s ease-in-out;
		.input {
			width: 100%;
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: 400;
			font-size: 32rpx;
			color: #000;
		}
	
		.code-input {
			width: 400upx;
		}
	
		.code-btn {
			font-size: 24upx;
			display: block;
			line-height: 64upx;
			position: absolute;
			right: 0;
			top: calc(50% - 32upx);
			color: #000000;
			background-color: #fff;
		}
	}
	.btn {
		width: 390rpx;
		height: 98rpx;
		background: #000;
		color: #FEC92F;
		text-align: center;
		line-height: 98rpx;
		font-size: 32rpx;
		border-radius: 50rpx;
		margin: 0 auto;
		margin-top: 100rpx;
	}
}
</style>
